<html>

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!--Let browser know website is optimized for mobile-->
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>The Aviator: The Game | Codrops</title>
	<meta name="description"
		content="Demo of the game: The Making of 'The Aviator': Animating a Basic 3D Scene with Three.js" />
	<meta name="keywords"
		content="three.js, webgl, tutorial, game, 3d, animation, airplane, web development, javascript" />
	<meta name="author" content="Karim Maaloul for Codrops" />

	<!-- 谷歌字体源地址不可用，需要用谷歌中国站的  http://googlefonts.cn/ -->
	<!-- <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
	<link href="https://fonts.font.im/icon?family=Material+Icons" rel="stylesheet">
	<!-- Compiled and minified CSS -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

	<!-- Compiled and minified JavaScript -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

	<link rel="shortcut icon" href="favicon.ico">
	<!-- <link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,700,700italic' rel='stylesheet' type='text/css'> -->
	<link href='https://fonts.font.im/css?family=Playfair+Display:400,700,700italic' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" type="text/css" href="css/demo.css" />
	<link rel="stylesheet" type="text/css" href="css/game.css" />
	<script type="text/javascript" src="js/TweenMax.min.js"></script>
	<script type="text/javascript" src="js/three.min.js"></script>
	<script type="text/javascript" src="js/game.js" />
	</script>

	<!--[if IE]>
		  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->

</head>

<body>
	<script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils/control_utils.js"
		crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js"
		crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js" crossorigin="anonymous"></script>
	<!-- <script type="text/javascript" src="./js/nipplejs.js"></script>
	<script type="text/javascript">
		var options = {
			// zone: document.getElementById('zone_joystick'),
			color: '#d1b790',
			size: Math.min(200, Math.min(window.innerHeight, window.innerWidth) * 0.3),
		};
		var manager = nipplejs.create(options);
	</script> -->
	<div class="game-holder" id="gameHolder">
		<div class="header">
			<!-- <div id="div_video" style="display: none;"> -->
			<div id="div_video">
				<video class="input_video"></video>
			</div>
			<h1><span>the</span>Aviator</h1>
			<h2>fly it to the end</h2>
			<!-- <div class="score__content" id = "alpha">alpha</div>
			<div class="score__content" id = "beta">beta</div>
			<div class="score__content" id = "gamma">gamma</div> -->
			<div class="score" id="score">
				<div class="score__content" id="level">
					<div class="score__label">level</div>
					<div class="score__value score__value--level" id="levelValue">1</div>
					<svg class="level-circle" id="levelCircle" viewbox="0 0 200 200">
						<circle id="levelCircleBgr" r="80" cx="100" cy="100" fill="none" stroke="#d1b790"
							stroke-width="24px" />
						<circle id="levelCircleStroke" r="80" cx="100" cy="100" fill="none" #f25346 stroke="#68c3c0"
							stroke-width="14px" stroke-dasharray="502" />
					</svg>
				</div>
				<div class="score__content" id="dist">
					<div class="score__label">distance</div>
					<div class="score__value score__value--dist" id="distValue">000</div>
				</div>
				<div class="score__content" id="energy">
					<div class="score__label">energy</div>
					<div class="score__value score__value--energy" id="energyValue">
						<div class="energy-bar" id="energyBar"></div>
					</div>
				</div>
			</div>
			<div style="height: 200px;"></div>
			<!-- <a class="waves-effect waves-light btn" style="width: auto; height: auto;"><h1>Continue</h1></a> -->
			<div id="preloader01" style="position: relative;
			width: 100px;
			height: 100px;
			top: 14vh;
			right:0;
			bottom:0;
			left:0;
			margin:auto;">
				<div class="preloader-wrapper active" style="width: 100px; height: 100px;">
					<div class="spinner-layer spinner-red-only">
						<div class="circle-clipper left">
							<div class="circle"></div>
						</div>
						<div class="gap-patch">
							<div class="circle"></div>
						</div>
						<div class="circle-clipper right">
							<div class="circle"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="world" id="world"></div>
		<div class="message message--replay" id="replayMessage">Click to Replay</div>
		<div class="message message--instructions" id="instructions">Grab the blue pills<span>avoid the red ones</span>
		</div>
		<!-- <div id="zone_joystick"></div> -->
		<div class="fixed-action-btn">
			<!-- <a class="btn-floating btn-large red modal-trigger" data-target="modal1" onclick="pauseGame();"> -->
			<a class="btn-floating btn-large red modal-trigger" data-target="modal1">
				<i class="material-icons">menu</i>
				<!-- <i class="large material-icons">mode</i> -->
			</a>
		</div>
		<div id="modal1" class="modal" style="background-color:rgba(255,255,255,0.95);">
			<div class="modal-content" style="font-size: 1.1em;">
				<h4 style="text-align: center;">菜单</h4>
				<ul class="collapsible" style="margin-top: 20px;">
					<li class="active">
						<div class="collapsible-header">简介</div>
						<div class="collapsible-body"><span>
								<p>这是一个飞行小游戏</p>
								<p>移动鼠标或触控来操作飞机</p>
								<p>躲避红色障碍物</p>
								<p>捕获蓝色奖励以获得加分</p>
								<p>享受你的游戏旅程吧</p>
							</span></div>
					</li>
					<li>
						<div class="collapsible-header">附加功能</div>
						<div class="collapsible-body">						<div class="switch">
							<p>启用基于摄像头的手势操控</p>
							<label>
								Off
								<input type="checkbox">
								<span class="lever"></span>
								On
							</label>
						</div></div>
					</li>
				</ul>
			</div>
			<!-- <div class="modal-footer" style="background-color:rgba(255,255,255,0.7); height: auto;">
				<a href="#!" class="modal-close waves-effect waves-green btn-flat" onclick="loop();">关闭</a>
			</div> -->
		</div>
	</div>

	<!-- Demo links -->
	<!-- <nav class="meta">
			<a class="codrops-icon codrops-icon--prev" href="http://tympanus.net/Development/Interactive3DMallMap/" title="Previous Demo"><span>Previous Demo</span></a>
			<a class="codrops-icon codrops-icon--drop" href="http://tympanus.net/codrops/?p=26501" title="Back to the article"><span>Back to the Codrops article</span></a>
			<a class="demo-link" href="part1.html">Part 1</a>
			<a class="demo-link" href="part2.html">Part 2</a>
		</nav> -->
	<!-- <div class="partisan">
			<svg class="partisan__bg" viewBox="0 0 500 188" preserveAspectRatio="none" width="100%" height="100%" aria-hidden="true">
				<polygon points="0 154 123.39 0 235.78 14.79 365.6 28.9 436.24 114.93 500 188 0 188 0 154" fill="#bed730"/>
				<polygon points="0 188 108.84 18.17 347.91 26.79 500 188 365.6 28.9 123.39 0 0 154 0 188" fill="#dde465"/>
			</svg>
			<a class="partisan__link" href="https://goo.gl/oECseP" rel="nofollow">
				<img class="partisan__img" src="img/Partisan_Bushel.png" alt="Bushel: Easily manage all your Apple devices at work"/>
				<h3 class="partisan__title">Bushel: Easily manage all your Apple devices at work</h3>
			</a>
		</div> -->
	<script type="text/javascript">
		// $(document).ready(function () {
		// 	// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
		// 	$('#modal1').modal('open');
		// });
		const videoElement = document.getElementsByClassName('input_video')[0];
		const hands = new Hands({
			locateFile: (file) => {
				return `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`;
			}
		});
		hands.setOptions({
			maxNumHands: 2,
			modelComplexity: 1,
			minDetectionConfidence: 0.5,
			minTrackingConfidence: 0.5
		});
		// hands.onResults(onResults);
		const mediapipeCamera = new Camera(videoElement, {
			onFrame: async () => {
				await hands.send({ image: videoElement });
			},
			// width: 1280,
			// height: 720
		});
		// mediapipeCamera.start();
		function fullScreen(ele) {
			if (ele.requestFullscreen) {
				ele.requestFullscreen();
			} else if (ele.mozRequestFullScreen) {
				ele.mozRequestFullScreen();
			} else if (ele.webkitRequestFullscreen) {
				ele.webkitRequestFullscreen();
			} else if (ele.msRequestFullscreen) {
				ele.msRequestFullscreen();
			}
		}
		function exitFullscreen() {
			if (document.exitFullScreen) {
				document.exitFullScreen();
			} else if (document.mozCancelFullScreen) {
				document.mozCancelFullScreen();
			} else if (document.webkitExitFullscreen) {
				document.webkitExitFullscreen();
			} else if (document.msExitFullscreen) {
				document.msExitFullscreen();
			}
		}
		function isFullScreen() {
			return !!(
				document.fullscreen ||
				document.mozFullScreen ||
				document.webkitIsFullScreen ||
				document.webkitFullScreen ||
				document.msFullScreen
			);
		}
		function buttonClick() {
			if (isFullScreen()) {
				exitFullscreen();
			}
			else {
				fullScreen(document.documentElement);
			}
		}
		// function startMemu(){
		// 	// var elem = document.getElementById("modal1")
		// 	// var instance = M.Modal.getInstance(elem);
		// 	// instance.open();
		// 	$('#modal1').modal('open');
		// }
	</script>
</body>

</html>